<template>
    <div class="index1">
        <div class="area1">
            <el-card shadow="always">
                <div slot="header">
                    <span :style="{ fontFamily: '微软雅黑', fontSize: '16px', fontWeight: 'bold' }">社保方案设置</span>
                </div>
                <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
                    <el-form-item label="方案名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 4 }"></el-input>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <div class="area2">
            <el-tabs v-model="activeName">
                <el-tab-pane name="first">
                    <span slot="label" class="fontClass" style="font-size: 16px;">方案配置</span>
                    <el-table :data="tableData" :span-method="objectSpanMethod"
                        :header-cell-style="{ background: '#f5f7f9', borderTop: '1px solid #ebeef5', textAlign: 'center' }"
                        :cell-style="{ textAlign: 'center' }" style="width: 100%; margin-top: 10px">
                        <el-table-column prop="type" width="180">
                            <template slot="header">
                                <el-popover placement="bottom" seyle="width:60px" v-model="visible">
                                    <div style="padding-bottom: 10px;border-bottom: 1px solid #000;">
                                        <el-checkbox v-model="selectall" label="全选" :indeterminate="false"></el-checkbox>
                                    </div>
                                    <div style="margin-top: 10px;" v-for="item, index in typelist" :key="index">
                                        <el-checkbox v-model="item.checked" @change="changeCheck(index)"
                                            :label="item.typename" :indeterminate="false"></el-checkbox>
                                    </div>
                                    <span slot="reference" style="color: #3399ff;cursor: pointer;">
                                        +添加
                                    </span>
                                </el-popover>

                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="缴纳对象">
                        </el-table-column>
                        <el-table-column label="缴纳基数">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.jishu" size="mini" style="width: 80px;"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="基数下限">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.xiaxian" size="mini" style="width: 80px;"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="基数上限">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.shangxian" size="mini" style="width: 85px;"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot="header">
                                <span>
                                    缴纳比例(%)
                                </span>
                            </template>
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.bili" controls-position="right" :min="0" :max="36"
                                    size="mini" style="width: 85px;"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="固定金额">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.guding" size="mini" style="width: 80px;"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="缴纳金额">
                            <template slot-scope="scope">
                                <el-input disabled v-model="scope.row.jiaona" size="mini" style="width: 80px;"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="有效小数位">
                            <template slot-scope="scope">
                                <el-select style="width: 95px;" v-model="scope.row.xiaoshuwei" size="mini">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="小数保留规则">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.baoliu" size="mini">
                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <div>
                                    <el-button type="danger" @click="deloption(scope.row)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane name="second">
                    <span slot="label" class="fontClass" style="font-size: 16px;">关联人员</span>
                    <div style="margin-bottom: 10px;">
                        <el-button type="primary">添加</el-button>
                        <el-button type="primary" style="background-color: #fff;color: #3399ff;">删除</el-button>
                    </div>
                    <el-table ref="multipleTable" :data="tableDataShow" stripe
                        :header-cell-style="{ background: '#f5f7f9', borderTop: '1px solid #ebeef5', textAlign: 'center' }"
                        :cell-style="{ textAlign: 'center' }" style="width: 100%">
                        <el-table-column type="selection" width="'5%'">
                        </el-table-column>
                        <el-table-column type="index" label="序号" width="'5%'">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="'10%'">
                        </el-table-column>
                        <el-table-column prop="bumen" label="部门" width="'10%'">
                        </el-table-column>
                        <el-table-column prop="zhiwei" label="岗位" width="'10%'">
                        </el-table-column>
                        <el-table-column prop="tel" label="手机号" width="'10%'">
                        </el-table-column>
                        <el-table-column prop="gonghao" label="工号" width="'10%'">
                        </el-table-column>
                        <el-table-column prop="zhengjian" label="证件号" width="'10%'">
                        </el-table-column>
                        <el-table-column prop="emptype" label="员工类型" width="'10%'">
                        </el-table-column>
                        <el-table-column prop="planname" label="当前方案" width="'10%'">
                        </el-table-column>
                        <el-table-column prop="shenbaojishu" label="申报基数" width="'10%'">
                        </el-table-column>
                    </el-table>
                    <el-row style="margin-top: 15px;">
                        <el-col :span="24" :style="{ textAlign: 'right' }">
                            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="currentPage4" layout="total, prev, pager, next" :total="10">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
            <!-- <el-card shadow="always">
                <div slot="header">
                    <span :style="{ fontFamily: '微软雅黑', fontSize: '16px', fontWeight: 'bold' }">方案配置</span>
                </div>
                <el-table :data="tableData" :span-method="objectSpanMethod"
                    :header-cell-style="{ background: '#f5f7f9', borderTop: '1px solid #ebeef5', textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }" style="width: 100%; margin-top: 10px">
                    <el-table-column prop="type" width="180">
                        <template slot="header">
                            <el-popover placement="bottom" seyle="width:60px" v-model="visible">
                                <div style="padding-bottom: 10px;border-bottom: 1px solid #000;">
                                    <el-checkbox v-model="selectall" label="全选" :indeterminate="false"></el-checkbox>
                                </div>
                                <div style="margin-top: 10px;" v-for="item,index in typelist" :key="index">
                                    <el-checkbox v-model="item.checked" @change="changeCheck(index)" :label="item.typename"
                                        :indeterminate="false"></el-checkbox>
                                </div>
                                <span slot="reference" style="color: #3399ff;cursor: pointer;">
                                    +添加
                                </span>
                            </el-popover>

                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="缴纳对象">
                    </el-table-column>
                    <el-table-column label="缴纳基数">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.jishu" size="mini" style="width: 80px;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="基数下限">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.xiaxian" size="mini" style="width: 80px;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="基数上限">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.shangxian" size="mini" style="width: 85px;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot="header">
                            <span>
                                缴纳比例(%)
                            </span>
                        </template>
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.bili" controls-position="right" :min="0" :max="36"
                                size="mini" style="width: 85px;"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column label="固定金额">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.guding" size="mini" style="width: 80px;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="缴纳金额">
                        <template slot-scope="scope">
                            <el-input disabled v-model="scope.row.jiaona" size="mini" style="width: 80px;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="有效小数位">
                        <template slot-scope="scope">
                            <el-select style="width: 95px;" v-model="scope.row.xiaoshuwei" size="mini">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="小数保留规则">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.baoliu" size="mini">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="danger" @click="deloption(scope.row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card> -->
        </div>
        <div class="area3">
            <el-card shadow="always">
                <el-button size="mini" @click="dialogVisible = true">返回</el-button>
                <el-button size="mini" @click="quxiao">取消</el-button>
                <el-button type="primary" size="mini" @click="baocun">保存</el-button>
            </el-card>
        </div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>您还没有保存，是否需要保存？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleClose">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: '',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            form: {
                name: '',
                desc: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入方案名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                ],
            },
            activeName: 'first',
            tableData: [{
                type: '养老保险',
                name: '公司',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 16,
                guding: '3000.00',
                jiaona: '1,280',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }, {
                type: '养老保险',
                name: '个人',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 8,
                guding: '3000.00',
                jiaona: '640',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }, {
                type: '医疗保险',
                name: '公司',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 9.8,
                guding: '3000.00',
                jiaona: '784',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }, {
                type: '医疗保险',
                name: '个人',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 2,
                guding: '3000.00',
                jiaona: '160',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }, {
                type: '失业保险',
                name: '公司',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 0.5,
                guding: '3000.00',
                jiaona: '40',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }, {
                type: '失业保险',
                name: '个人',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 0.5,
                guding: '3000.00',
                jiaona: '40',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }, {
                type: '工伤保险',
                name: '公司',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 0.5,
                guding: '3000.00',
                jiaona: '24',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }, {
                type: '工伤保险',
                name: '个人',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 0.5,
                guding: '3000.00',
                jiaona: '-',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }, {
                type: '生育保险',
                name: '公司',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 0,
                guding: '3000.00',
                jiaona: '-',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }, {
                type: '生育保险',
                name: '个人',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 0,
                guding: '3000.00',
                jiaona: '-',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }],
            orther: [{
                type: '其他',
                name: '公司',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 0,
                guding: '3000.00',
                jiaona: '-',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }, {
                type: '其他',
                name: '个人',
                jishu: '8000.00',
                xiaxian: '5869.00',
                shangxian: '31884.00',
                bili: 0,
                guding: '3000.00',
                jiaona: '-',
                xiaoshuwei: '四舍五入',
                baoliu: '2位'
            }],
            options: [{
                value: '四舍五入',
                label: '四舍五入'
            }, {
                value: '取整',
                label: '取整'
            }, {
                value: '进位取整',
                label: '进位取整'
            }],
            options1: [{
                value: '0位',
                label: '0位'
            }, {
                value: '1位',
                label: '1位'
            }, {
                value: '2位',
                label: '2位'
            }, {
                value: '3位',
                label: '3位'
            }],
            dialogVisible: false,
            visible: false,
            typelist: [
                {
                    id:1,
                    typename: '养老保险',
                    checked: true
                }, {
                    id:2,
                    typename: '医疗保险',
                    checked: true
                }, {
                    id:3,
                    typename: '失业保险',
                    checked: true
                }, {
                    id:4,
                    typename: '工伤保险',
                    checked: true
                }, {
                    id:5,
                    typename: '生育保险',
                    checked: true
                }, {
                    id:6,
                    typename: '其他',
                    checked: false
                },
            ],
            tableData1: [
                {
                    id:1,
                    name: '莫俏丽',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 13714046148,
                    gonghao: 'GH2022011005',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '方案一',
                    shenbaojishu: 5869,
                }, {
                    id:2,
                    name: '令云心',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 19893995896,
                    gonghao: 'GH2022011006',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '方案二',
                    shenbaojishu: 5869,
                }, {
                    id:3,
                    name: '堂安春',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 15083709763,
                    gonghao: 'GH2021011007',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '方案三',
                    shenbaojishu: 5869,
                }, {
                    id:4,
                    name: '笃水瑶',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 15053222627,
                    gonghao: 'GH2021011008',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '方案四',
                    shenbaojishu: 5869,
                }, {
                    id:5,
                    name: '野依云',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 13669997085,
                    gonghao: 'GH2021011009',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '方案五',
                    shenbaojishu: 5869,
                }, {
                    id:6,
                    name: '戈元冬',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 15080525797,
                    gonghao: 'GH2020011010',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '方案一',
                    shenbaojishu: 5869,
                }, {
                    id:7,
                    name: '闽飞昂',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 17882152912,
                    gonghao: 'GH2020011011',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '方案二',
                    shenbaojishu: 5869,
                }, {
                    id:8,
                    name: '闾丘易文',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 15725901968,
                    gonghao: 'GH2019011012',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '方案三',
                    shenbaojishu: 5869,
                }, {
                    id:9,
                    name: '曲嘉祥',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 13815204688,
                    gonghao: 'GH2019011013',
                    zhengjian: 'SFZ20213544',
                    emptype: '试用',
                    planname: '方案四',
                    shenbaojishu: 5869,
                }, {
                    id:10,
                    name: '连昌',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 15286179282,
                    gonghao: 'GH2019011014',
                    zhengjian: 'SFZ20213544',
                    emptype: '试用',
                    planname: '方案五',
                    shenbaojishu: 5869,
                },
            ],
            tableDataShow: [],
        }
    },
    mounted() {
        this.form.name = this.$route.query.plan
        this.tableDataShow = this.tableData1
    },
    computed: {
        selectall: {
            get() {

                return this.typelist.every(item => item.checked)
            },
            set(value) {
                this.typelist.forEach(item => item.checked = value)
                this.addoption()
            }
        }
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 | columnIndex === 10) {
                if (rowIndex % 2 === 0) {
                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },
        handleClose() {
            this.dialogVisible = false;
            this.$router.back();
        },
        baocun() {
            this.$message({
                showClose: true,
                message: '方案保存成功！',
                type: 'success'
            });
        },
        quxiao() {
            this.$message({
                showClose: true,
                message: '方案取消成功！',
                type: 'success'
            });
        },
        addoption() {
            this.tableData = [...this.tableData, ...this.orther]
        },
        deloption(row) {
            this.$confirm('此操作将删除该选项, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tableData = this.tableData.filter(item => item.type !== row.type)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        changeCheck(idx) {
            console.log(idx);
            this.typelist[idx].checked = !this.typelist[idx].checked
            if (this.typelist[idx].checked) {
                this.addoption()
            } else {
                const type = this.typelist[idx].typename
                this.tableData = this.tableData.filter(item => item.type !== type)

            }
        }
    }
};
</script>
<style lang='less'>
.index1 {
    width: 100%;
    height: 100%;
    box-sizing: border-box;


    .area1 {
        .el-card {
            .el-form {
                margin-left: 30px;
                width: 30%;
            }
        }
    }

    .area2 {
        margin-top: 10px;
        padding-bottom: 80px;

        .el-tabs {
            background: #fff;
            padding: 20px;
        }

        .el-card {
            .el-table tbody tr:hover>td {
                background-color: #ffffff !important
            }
        }
    }

    .area3 {
        width: 88.5%;
        position: fixed;
        left: 200px;
        bottom: 0;
        z-index: 999;

        .el-card {
            box-sizing: border-box;
        }
    }
}
</style>